import React, { Component } from 'react';
import moment from 'moment';
class Liftcycle extends Component {
    //状态
    state={
        //npm i moment --force   下载
        time:moment().format('YYYY-MM-DD HH:mm:ss')
    }
    //创建  定时器
    timeinterval=null

    //组件完成挂载执行
    //  组件在更新时,先卸载老的组件,然后重新渲染新得组件
    componentDidMount(){
        //创建定时器
        this.timeinterval = setInterval(()=>{
            this.setState({
                time:moment().format('YYYY-MM-DD HH:mm:ss')
            })
            console.log('组件完成挂载执行执行定时器');
        },1000)
    }

    //组件将要卸载时执行,     清除定时器
    componentWillUnmount(){
        clearInterval(this.timeinterval);
    }

    render() {
        return (
            <>
                <h1>生命周期组件</h1>
                <div style={{width:'500px',height:'100px',lineHeight:'100px',border:"1px solid gray",fontSize:"30px",textAlign:"center"}}>{this.state.time}</div>
            </>
        );
    }
}

export default Liftcycle;